<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>用函数把改变样式重写</title>
    <style>
	    #div1{
        	width:200px;height:200px;background:red;
        }
	</style>
</head>
<body>
    
    <script type="text/javascript">
        function toGreen(){
            document.getElementById('div1').style.width='300px';
            document.getElementById('div1').style.height='300px';
            document.getElementById('div1').style.background='green';
        }

        function toRed(){
	        document.getElementById('div1').style.width='200px';
	        document.getElementById('div1').style.height='200px';
	        document.getElementById('div1').style.background='red';
        }



    </script>



    <div id="div1" onmouseover="toGreen()" onmouseout="toRed()">
    	

    </div>
	
</body>
</html>